<template>
  <div class="title-nav">
    <div class="title-nav__title" :style="{'background-color': titlebgcolor, 'color': titlecolor}">
      {{ titlename }}
    </div>
    <svg viewBox="0 0 1000 1000" class="title-nav__back"
         v-on:click="back"
         v-show="isShow"
    >
      <path :fill="svgcolor" fill-rule="evenodd" d="
        M296.114 508.035c-3.22-13.597.473-28.499
        11.079-39.105l333.912-333.912c16.271-16.272
        42.653-16.272 58.925 0s16.272 42.654 0
        58.926L395.504 498.47l304.574 304.574c16.272
        16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926
        0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z"></path></svg>
  </div>
</template>

<script>
export default {
  name: 'TitleNav',
  props: [
    'svgcolor',
    'isShow',
    'titlebgcolor',
    'titlecolor',
    'titlename',
  ],
  methods: {
    back() {
      this.$router.go(-1); // 返回上一层
    },
  },
};
</script>

<style scoped>

</style>
